<template>
    <div>
        <div class="admin_table_handle_btn">
            <a-form layout="inline" :form="form"  @submit="handleSubmit" style="display: flex;align-items: center">

                <a-form-model-item label="统计方式">
                    <a-select  @change="dateChange" :default-value="1" >
                        <a-select-option  :value="value.id" v-for="(value,index) in searchStr" :key="index">
                            {{ value.name }}
                        </a-select-option>
                    </a-select>
                </a-form-model-item>

                <a-month-picker v-if="dateShow"  placeholder="选择月份" @change="date_change" />
                <a-form-model-item label="">
                    <a-select  @change="date_change" :default-value="2021" v-if="yearShow">
                        <a-select-option  :value="value.id" v-for="(value,index) in yearStr" :key="index">
                            {{ value.name }}
                        </a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item >
                    <a-button icon="search" @click="search">
                        查询
                    </a-button>
                </a-form-model-item>
                <!--                <a-form-model-item >
                                    <a-button  @click="reset">重置</a-button>
                                </a-form-model-item>-->

            </a-form>
        </div>

        <div class="admin_card">
            <div class="content">
                <div id="user_plot" class="default_gd"></div>
            </div>
        </div>
    </div>
</template>

<script>
import {Line } from 'g2plot';
import moment from 'moment';
export default {
    props:['params'],
    data() {
        return {
            searchStr:[{'id':1,'name':'月统计'},{'id':2,'name':'年统计'}],
            yearStr:[{'id':2020,'name':'2020'},{'id':2021,'name':2021},{'id':2022,'name':2022},{'id':2023,'name':2023},{'id':2024,'name':2024},{'id':2025,'name':2025}],
            param:{
                type:1,
                code:this.params.tableAddress,
                community:this.params.community,
                create_time:'',
                year:2021
            },
            info:{},
            list:[],
            isUserPlot:false,
            user_plot:[{time:'00：00',num:0.00},{time:'04：00',num:0.00},{time:'08：00',num:0.00},{time:'12：00',num:0.00},{time:'16：00',num:0.00},{time:'20：00',num:0.00},{time:'24:00',num:0.00}],
            userObj:null,
            str:'功率',
            dateShow:true,
            yearShow:false
        };
    },
    methods: {
        date_change(e){
            this.param.year = e
        },
        dateChange(e){
            this.param.type = e
            if(e==1){
                this.dateShow = true
                this.yearShow = false
            }else if(e==2){
                this.dateShow = false
                this.yearShow = true
            }
            this.get_info();
        },
        handleChange(e){
            this.param.cate = e
        },
        search(params) {
            let param = this.param
            if(param.type==1){
                if(this.$isEmpty(param.create_time)){
                    return this.$message.error('请选择时间');
                }
            }
            this.get_info();

        },
        get_user_plot(){
            let data = this.user_plot;
            if(this.isUserPlot){
                this.userObj.changeData(data);
                return;
            }
            this.userObj = new Line('user_plot', {
                data,
                xField: 'time',
                yField: 'num',
                label: {},
                point: {
                    size: 4,
                    style: {
                        stroke: '#fff',
                        lineWidth: 2,
                    },
                },
                meta: {
                    time: {
                        alias: '时间',
                    },
                    num: {
                        alias: '',
                    },
                },
            });

            this.userObj.render();
            this.isUserPlot = true;
        },
        get_info(){
            this.$get(this.$api.waterReport,this.param).then(res=>{

                if(res.data.data.length>0){
                    this.user_plot = res.data.data;
                }
                this.get_user_plot();
            })
        },
        getCurrentStyle(current, today) {
            const style = {};
            if (current.date() === 1) {
                style.border = '1px solid #1890ff';
                style.borderRadius = '50%';
            }
            return style;
        },
    },
    created() {

    },
    mounted() {
        this.get_info();
    },
}
</script>
